<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>用户列表 -- 托无忧评测运营支撑系统</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <link href="/css/paginator.css" rel="stylesheet">
    <link href="/css/pages/dashboard.css" rel="stylesheet">

    <script src="https://kit.fontawesome.com/3fe533300e.js" crossorigin="anonymous"></script>



    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="container">

    <ul class="nav nav-tabs nav-justified ">
        <li role="presentation"><a href="/mview/index">首页</a></li>
        <li role="presentation" class="active"><a href="#">用户列表</a></li>
        <li role="presentation"><a href="/mview/promocodes">优惠码</a></li>
        <li role="presentation"><a href="/mview/orders">订单列表</a></li>
        <li role="presentation"><a href="/mview/redeemcodes">兑换码</a></li>
        <li role="presentation"><a href="/mview/redeemrecords">兑换记录</a></li>
        <li role="presentation"><a href="/mview/products">产品列表</a></li>
        <li role="presentation"><a href="/mview/news">新闻列表</a></li>
        <li role="presentation"><a href="/mview/articles">文章</a></li>
    </ul>

    <div class="span12">
        <div class="widget widget-table action-table">
            <div class="widget-header">&nbsp;&nbsp;
                <i class="fas fa-user">用户列表</i>
            </div>

            <div class="input-append">
                <input class="span2 m-wrap" id="appendedInputButton" type="text">
                <button class="btn" type="button">搜索</button>
            </div>

            <!-- /widget-header -->
            <div class="widget-content">
                <div class="form-actions">
                    <form id="edit-profile" class="form-horizontal">

                    </form>
                </div>
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr>
                        <th> 用户账号 </th>
                        <th> 加入时间 </th>
                        <th> 机构名称 </th>
                        <th> 机构联系方式 </th>
                        <th> 省市区 </th>
                        <th> 报告总数 </th>
                        <th> 宝贝总数 </th>
                        <th> 报告周新增 </th>
                        <th> 宝贝周周新增 </th>
                        <th class="td-actions">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="staff, staffInter : ${users}">
                        <td th:text="${staff.mobile}"></td>
                        <td th:text="${staff.created}"></td>
                        <td th:text="${staff.name}"></td>
                        <td th:text="${staff.contact_number}"></td>
                        <td th:text="${staff.province}"></td>
                        <td th:text="${staff.reportCount}"></td>
                        <td th:text="${staff.childrenCount}"></td>
                        <td th:text="${staff.weekNewReport}"></td>
                        <td th:text="${staff.weekNewChildren}"></td>
                        <td class="td-actions">
                            <a th:href="@{'/mview/userinfo?userId=' + ${staff.id}}" class="btn btn-small btn-success"><i class="far fa-edit"></i></a>
                            <a th:href="@{'javascript:removeUser(' + ${staff.id} + ');'}" class="btn btn-danger btn-small"><i class="far fa-trash-alt"></i></a></td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <div class="paginator-base customBootstrap">
<!--                <p><span id="pagination-label"></span></p>-->
                <ul id="pagination" class="pagination"></ul>
            </div>
            <!-- /widget-content -->
        </div>
    </div>
</div> <!-- /container -->

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="/js/jq-paginator.min.js"></script>

<script th:inline="javascript">
    /*<![CDATA[*/
    $('#pagination').jqPaginator({
        totalPages: /*[[${totalPage}]]*/ 40,
        visiblePages: 5,
        currentPage: /*[[${pageNum}]]*/ 1,

        first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
        prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',
        next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
        last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',
        page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
        onPageChange: function (num) {
            $('#pagination-label').html( '第 '+num+' 页');

            if (num != /*[[${pageNum}]]*/ 1){
                window.location.href = "/mview/users?pageNum=" + num;
            }

        }
    });
    /*]]>*/
</script>


</body>
</html>